<template>
    <h2 class="title">{{ notice.title }}</h2>
    <div class="info">
        <label class="label-for">优先级：</label>
        <a-tag v-if="notice.priority === 1">低</a-tag>
        <a-tag v-if="notice.priority === 2" color="orange">中</a-tag>
        <a-tag v-if="notice.priority === 3" color="red">高</a-tag>
        <label class="label-for">创建时间：</label> {{ notice.createDate }}
    </div>
    <div v-dompurify-html="notice.content" class="content"></div>
</template>
<script setup>
import { getById } from '/@/api/System/Notice'
import { updateStatus } from '/@/api/System/NoticeUser'
import { reactive } from 'vue'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'

const notice = reactive({
    id: null,
    title: null,
    createDate: null,
    content: null,
    priority: null
})

const load = row => {
    getById(row.notice_id).then(result => {
        if (result.code === SUCCESS_CODE) {
            notice.title = result.data.title
            notice.createDate = result.data.createDate
            notice.content = result.data.content
            notice.priority = result.data.priority
            isRead(row.id)
        }
    })
}

const isRead = id => {
    updateStatus({ id: id })
}

defineExpose({ load })
</script>
<style lang="less" scoped>
.title {
    font-size: 22px;
    line-height: 1.4;
    text-align: center;
    font-weight: bold;
}

.info {
    text-align: center;

    .label-for {
        margin-left: 20px;
    }
}

.content {
    margin-top: 20px;
}
</style>
